<template>
  <div
    class="el-table-footer-wrapper"
    :class="[
      table && table.layout.scrollX
        ? `is-scrolling-${table.scrollPosition}`
        : 'is-scrolling-none',
      table && table.tableSize ? `el-table-footer--${table.tableSize}` : '',
      {
        'el-table-footer-wrapper--border': table && table.border,
      },
    ]"
  >
    <div
      v-if="fixedColumns.length > 0"
      class="el-table-footer-wrapper__fixed-left"
      v-mousewheel="handleFixedMousewheel"
      :style="{
        width: fixedWidth,
      }"
    >
      <table-footer
        :data="data"
        :summary-method="summaryMethod"
        :summary-array="summaryArray"
        fixed="left"
        ref="fixedLeftFooter"
      >
      </table-footer>
    </div>
    <div class="el-table-footer" ref="footerWrapper">
      <table-footer
        :data="data"
        :summary-method="summaryMethod"
        :summary-array="summaryArray"
        ref="footer"
      ></table-footer>
    </div>
    <div
      v-if="rightFixedColumns.length > 0"
      class="el-table-footer-wrapper__fixed-right"
      v-mousewheel="handleFixedMousewheel"
      :style="{
        width: rightFixedWidth,
        right:
          table && table.layout.scrollY
            ? (table.border
                ? table.layout.gutterWidth
                : table.layout.gutterWidth || 0) + 'px'
            : 0,
      }"
    >
      <table-footer
        :data="data"
        :summary-method="summaryMethod"
        :summary-array="summaryArray"
        fixed="right"
        ref="fixedRightFooter"
      ></table-footer>
    </div>
  </div>
</template>

<script>
import { Table } from "element-ui";
import Mousewheel from "element-ui/src/directives/mousewheel";
import TableFooter from "./table-footer";
import { debounce, throttle } from "throttle-debounce";
export default {
  name: "ElTableFooter",
  components: {
    TableFooter,
  },
  directives: {
    Mousewheel,
  },
  props: {
    showSummary: Boolean,
    summaryMethod: Function,
    summaryArray: Array,
    data: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      table: null,
    };
  },
  methods: {
    handleFixedMousewheel(event, data) {
      const bodyWrapper = this.bodyWrapper;
      if (Math.abs(data.spinY) > 0) {
        const currentScrollTop = bodyWrapper.scrollTop;
        if (data.pixelY < 0 && currentScrollTop !== 0) {
          event.preventDefault();
        }
        if (
          data.pixelY > 0 &&
          bodyWrapper.scrollHeight - bodyWrapper.clientHeight > currentScrollTop
        ) {
          event.preventDefault();
        }
        bodyWrapper.scrollTop += Math.ceil(data.pixelY / 5);
      } else {
        bodyWrapper.scrollLeft += Math.ceil(data.pixelX / 5);
      }
    },
    handleHeaderFooterMousewheel(event, data) {
      const { pixelX, pixelY } = data;
      if (Math.abs(pixelX) >= Math.abs(pixelY)) {
        this.bodyWrapper.scrollLeft += data.pixelX / 5;
      }
    },
    // TODO 使用 CSS transform
    syncPostion: throttle(20, function () {
      const {
        scrollLeft,
        scrollTop,
        offsetWidth,
        scrollWidth,
      } = this.bodyWrapper;
      const { footerWrapper } = this.$refs;
      if (footerWrapper) footerWrapper.scrollLeft = scrollLeft;
    }),
    syncFootPostion: throttle(20, function () {
      const {
        scrollLeft,
        scrollTop,
        offsetWidth,
        scrollWidth,
      } = this.$refs.footerWrapper;
      this.bodyWrapper.scrollLeft = scrollLeft;
    }),
    init(tableInstance) {
      const self = this;
      this.table = tableInstance;
      this.table.$refs.bodyWrapper.addEventListener(
        "scroll",
        this.syncPostion,
        { passive: true }
      );

      this.$nextTick(() => {
        const { fixedLeftFooter, footer, fixedRightFooter } = this.$refs;

        fixedLeftFooter && fixedLeftFooter.init();
        footer.init();
        fixedRightFooter && fixedRightFooter.init();
        self.$refs.footerWrapper.addEventListener(
          "scroll",
          this.syncFootPostion,
          { passive: true }
        );
      });
    },
  },
  computed: {
    fixedWidth() {
      return this.table ? this.table.layout.fixedWidth + "px" : "";
    },
    rightFixedWidth() {
      return this.table ? this.table.layout.rightFixedWidth + "px" : "";
    },
    fixedColumns() {
      return this.table ? this.table.store.states.fixedColumns : [];
    },
    rightFixedColumns() {
      return this.table ? this.table.store.states.rightFixedColumns : [];
    },
    bodyWrapper() {
      return (this.table && this.table.bodyWrapper) || {};
    },
  },
};
</script>

<style>
.el-table-footer-wrapper {
  position: relative;
  overflow: hidden;
  border-left: 1px solid #ebeef5;
}
.el-table-footer-wrapper.is-scrolling-none .el-table-footer-wrapper__fixed-left,
.el-table-footer-wrapper.is-scrolling-none
  .el-table-footer-wrapper__fixed-right,
.el-table-footer-wrapper.is-scrolling-left .el-table-footer-wrapper__fixed-left,
.el-table-footer-wrapper.is-scrolling-right
  .el-table-footer-wrapper__fixed-right {
  box-shadow: none;
}
.el-table-footer-wrapper::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  width: 1px;
  height: 100%;
  background-color: #ebeef5;
}
.el-table-footer-wrapper td,
.el-table-footer-wrapper th {
  padding: 12px 0;
  min-width: 0;
  box-sizing: border-box;
  text-overflow: ellipsis;
  vertical-align: middle;
  position: relative;
  text-align: left;
  font-size: 12px;
}
.el-table-footer-wrapper.el-table-footer--small td,
.el-table-footer-wrapper.el-table-footer--small th {
  padding-top: 8px;
  padding-bottom: 8px;
}
.el-table-footer-wrapper.el-table-footer--mini td,
.el-table-footer-wrapper.el-table-footer--mini th {
  padding-top: 6px;
  padding-bottom: 6px;
}
.el-table-footer-wrapper td {
  border-bottom: 1px solid #ebeef5;
  background-color: #f5f7fa;
  color: #606266;
}
.el-table-footer-wrapper td.is-right {
  text-align: right;
}
.el-table-footer-wrapper td.is-center {
  text-align: center;
}
.el-table-footer-wrapper .cell {
  padding-left: 10px;
  padding-right: 10px;
  box-sizing: border-box;
  white-space: normal;
  word-break: break-all;
  line-height: 23px;
}
.el-table-footer-wrapper--border td {
  border-right: 1px solid #ebeef5;
}
.el-table-footer-wrapper th.gutter {
  border-bottom: 1px solid #ebeef5;
}
.el-table-footer {
  overflow: auto;
  /* overflow: hidden; */
}
/* 隐藏滚动条 */
.el-table-footer::-webkit-scrollbar {
  display: none;
}
.el-table-footer table,
.el-table-footer-wrapper__fixed-left table,
.el-table-footer-wrapper__fixed-right table {
  table-layout: fixed;
  border-collapse: separate;
}
.el-table-footer-wrapper__fixed-left,
.el-table-footer-wrapper__fixed-right {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 3;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.12);
}
.el-table-footer-wrapper__fixed-right {
  left: auto;
}
.el-table-footer-wrapper__fixed-left table,
.el-table-footer-wrapper__fixed-right table {
  position: absolute;
  top: 0;
  left: 0;
}
.el-table-footer-wrapper__fixed-right table {
  left: auto;
  right: 0;
}
</style>
